<template>
	<view style="padding: 20rpx 32rpx;">
		
		
		<!-- 商品信息 -->
		<view class="info-card product-info">
			<view class="product-content">
				<view class="pro_img_box">
					<image :src="productInfo.img" mode="aspectFill" class="product-image"></image>
				</view>
				<view class="product-details">
					<view class="product-name">主题：{{productInfo.title}}</view>
					<view class="product-intr">简介：{{productInfo.describeText}}</view>
					<view class="product-quantity">¥{{orderInfo.payMoney}}</view>
				</view>
			</view>
		</view>
		
		
		
		<view class="info-card user-info">
		
			<view class="info-content">
				<view class="info-row">
					<text class="label">用户名：</text>
					<text>{{userInfo.userName}}</text>
				</view>
				<view class="info-row">
					<text class="label">手机号：</text>
					<text>{{userInfo.phone}}</text>
				</view>
			</view>
		</view>
		
		
	<view class="usermain u-bdr-12" v-if="orderInfo.questState > 1">
		<view class="usermain-item item-padding u-border-bottom">
			<view class="label_text">进度说明</view>
			<view>
				{{orderInfo.questProgressCondition}}
			</view>
		</view>
		<view class="usermain-item u-border-bottom">
			<view class="label_text">上传截图</view>
			<view class="valuscss">
				<view style="display: flex;flex-wrap: wrap;">
					<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;"
						v-if='orderInfo.questProgressPic' @click="previewImage(0,[orderInfo.questProgressPic])">
						<image :src='orderInfo.questProgressPic' mode="aspectFill"
							style="width: 150rpx;height: 150rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	

		

		<view class="usermain u-bdr-12"  v-if="orderInfo.questState === 1">
			<!--  -->
			<view class="usermain-item item-padding u-border-bottom">
				<view class="label_text">进度说明</view>
				<u-input v-model="orderInfo.questProgressCondition" type="textarea" style="width: 100%;"/>
			</view>
			<view class="usermain-item u-border-bottom">
				<view class="label_text">上传截图</view>
				<view class="valuscss">
					<view style="display: flex;flex-wrap: wrap;">
						<view style="margin-right: 10rpx;position: relative;margin-bottom: 10rpx;"
							v-if='orderInfo.questProgressPic' @click="previewImage(0,[orderInfo.questProgressPic])">
							<image src='/static/images/me/closeIconss.png'
								style="width: 30rpx;height: 30rpx;position: absolute;right: 0;top: -10rpx;z-index: 10;"
								@click.stop="orderInfo.questProgressPic=''"></image>
							<image :src='orderInfo.questProgressPic' mode="aspectFill"
								style="width: 150rpx;height: 150rpx;"></image>
						</view>
						
						<view v-if='!orderInfo.questProgressPic' style="width: 150rpx;
						height: 150rpx;
						background: #F7F7F7;
						display: flex;
						align-items: center;
						justify-content: center;
						"  @click="uploadImgTitleImg" >
													<image src='/static/images/me/cam.png' style="width: 50rpx;height: 44rpx;"
													></image>
												</view>
												
					
					</view>
				</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btn-group">
				<view class="usermain-btn" @click="messagebtn()" v-if="orderInfo.questState === 1">提交进度</view>
				<view class="usermain-btn" @click="messagebtn2()" v-if="orderInfo.questState === 2">确认完成</view>
			</view>
		</view>
	</view>

</template>

<script>
	import configdata from '../../../common/config.js';
	export default {
		data() {
			return {
				id: null,
				userInfo: {},
				productInfo: {},
				orderInfo: {},
			};
		},
		onLoad(e) {
			this.id = e.ordersId
			uni.setNavigationBarTitle({
				title: '订单详情'
			});
			this.getOrderInfo(this.id)
		},
		methods: {

			//放大图片
			previewImage(e, url) {
				uni.previewImage({
					urls: url,
					current: e
				});
			},

			// 资源详情 获取
			getOrderInfo(id) {
				this.$u.get("/app/spreader/getSpreadOrderInfo?orderId=" + id).then(
					res => {
						if (res.code === 0) {
							this.userInfo = res.userInfo
							this.productInfo = res.productInfo
							this.orderInfo = res.orderInfo
						}
					});
			},
			// titleImg
			onChooseTitleImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			// titleImg
			onChooseImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						url = JSON.parse(uploadFileRes.data);
						that.titleImg = url.data
						uni.hideLoading();
					}
				});

			},
			// bannerImg
			onChooseBannerImg(e) {
				let that = this;
				let url = ''
				let token = uni.getStorageSync('token');
				uni.showLoading({
					title: '上传中...'
				});
				uni.uploadFile({
					url: configdata.APIHOST + '/alioss/upload',
					filePath: e.detail.avatarUrl,
					header: {
						token: token
					},
					name: 'file',
					success: uploadFileRes => {
						uni.hideLoading();
						url = JSON.parse(uploadFileRes.data);
						that.bannerImg.push(url.data)
						
					}
				});

			},
			uploadImgTitleImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										uni.hideLoading();
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.orderInfo.questProgressPic = url.data
									}
								});
							}
						});
					}
				})
			},
			uploadImgImg() {
				let token = uni.getStorageSync('token')

				if (!token) {
					this.goLoginInfo();
					return;
				}
				let that = this;
				var url = null;
				uni.showActionSheet({
					// itemList按钮的文字接受的是数组
					itemList: ["从相册选择图片"],
					success(e) {
						var index = e.tapIndex
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], //从相册选择
							success: function(res) {
								uni.showLoading({
									title: '上传中...'
								});
								let token = uni.getStorageSync('token');
								let userId = uni.getStorageSync('userId');
								uni.uploadFile({
									url: configdata.APIHOST + '/alioss/upload',
									filePath: res.tempFilePaths[0],
									name: 'file',
									success: uploadFileRes => {
										url = JSON.parse(uploadFileRes.data);
										console.log(url)
										that.img = url.data
									}
								});
							}
						});
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
			// 保存
			messagebtn() {
				if (this.orderInfo.questProgressCondition == '' || this.orderInfo.questProgressCondition == null) {
					uni.showToast({
						title: "请输入完成情况",
						icon: "none"
					})
					return
				}
				if (this.orderInfo.questProgressPic == '' || this.orderInfo.questProgressPic == null) {
					uni.showToast({
						title: "请上传完成截图",
						icon: "none"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定保存信息',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							var data = {
								ordersId: this.orderInfo.ordersId,
								questProgressCondition: this.orderInfo.questProgressCondition,
								questProgressPic: this.orderInfo.questProgressPic
							}
							this.$u.post("/app/spreader/addProgressCondition", data).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '提交成功',
										icon: "none"
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							});
						}
					}
				});
			},
			// 保存
			messagebtn2() {
				if (this.orderInfo.questState != 2) {
					uni.showToast({
						title: "当前状态无法确认完成",
						icon: "none"
					})
					return
				}
				var that = this
				uni.showModal({
					title: '温馨提示',
					content: '确定完成当前订单信',
					confirmColor: '#8B8FF0',
					success: e => {
						if (e.confirm) {
							var data = {
								ordersId: this.orderInfo.ordersId
							}
							this.$u.post("/app/spreader/addConfirmation", data).then(res => {
								if (res.code === 0) {
									uni.showToast({
										title: '提交成功',
										icon: "none"
									})
									setTimeout(function() {
										uni.navigateBack()
									}, 1000)
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							});
						}
					}
				});
			},
			cancelBtn() {
				uni.navigateBack()
			}
		}
	};
</script>


<style>
	page {
		background: #F7F8FF;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		overflow: hidden;
		color: #666666;
		/* background-color: #fff; */
		background-color: rgba(255, 255, 255, 0) !important;
		width: 100%;
		height: 100%;
	}

	.usermain {
		
	}

	.usermain-item {
		/* display: flex;
		align-items: center; */
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		margin-bottom: 20rpx;
		/* border-bottom: 2rpx solid #f2f2f2; */
	}

	.usermain-item.item-padding {
		/* padding: 10rpx 40rpx 10rpx 0; */
	}

	.valuscss {
		width: 80%;
	}

	.cu-form-group {
		padding: 0;
		background: #FFFFFF;
		/* text-align: right; */
	}

	.cu-form-group input {
		background: #FFFFFF;
		font-size: 28rpx;
		color: #333333;

	}

	.footer-btn {
		position: fixed;
		left: 30rpx;
		bottom: 0;
		bottom: calc(20rpx + constant(safe-area-inset-bottom));
		bottom: calc(20rpx + env(safe-area-inset-bottom));
		/* margin-top: 40rpx; */
		/* padding: 0 32rpx; */
	}

	.btn-group {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
	}

	.footer-btn .usermain-btn {
	width: 690rpx;
	height: 80rpx;
	background: linear-gradient(90deg, #FD7885, #FAA7AF);
	border-radius: 40rpx;
	font-weight: bold;
	font-size: 28rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 80rpx;
	}

	.footer-btn .cancel-btn {
		background: linear-gradient(90deg, #999999, #666666);
	}

	.label_text {
		font-weight: bold;
		font-size: 28rpx;
		color: #1A1A1A;
		padding-bottom: 29rpx;
	}

	.info-card {
		background: #fff;
		border-radius: 10rpx;
		padding: 24rpx 20rpx 0 24rpx;
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 10rpx;
	}

	.info-content {
		/* padding: 10rpx 0; */
	}

	.info-row {
		display: flex;
		padding-bottom: 24rpx;
		font-weight: 500;
		font-size: 24rpx;
		color: #333333;
	}

	.label {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.product-content {
		display: flex;
		align-items: center;
		padding-bottom: 24rpx;
	}

	.product-image {
		width: 117rpx;
		height: 114rpx;
		border-radius: 8rpx;
		
	}
	
	.pro_img_box{
		width: 140rpx;
		height: 140rpx;
		background: #F7F7F7;
		border-radius: 10rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.product-details {
		flex: 1;
		position: relative;
	}

	.product-name {
		font-weight: bold;
		font-size: 28rpx;
		color: #1A1A1A;
		margin-bottom: 14rpx;
	}
	
	.product-intr{
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}

	.product-quantity {
		font-size: 24rpx;
		color: #666;
		/* position: absolute;
		right: 0;
		bottom: 0; */
		padding-top: 40rpx;
		display: flex;
		justify-content: end;
	}

	.upload-btn {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #f5f5f5;
		border-radius: 8rpx;
	}

	.upload-btn image {
		width: 150rpx;
		height: 150rpx;
	}
</style>